<template>
  <div class="app">
    <!--注意 
    1.谁的子组件事件,就向谁的模板占位符上加监听
    2.同理传递数据也是一样
    3.操作数据,在父组件上操作,子组件不要操作父组件的数据
    -->
    <TodoHeader @addlist="addlist"></TodoHeader>
    <TodoMain @asd="abcd" :list="list"></TodoMain>
    <TodoFooter @clearlist="list = []" :list="list"></TodoFooter>
  </div>
</template>
<script>

import TodoHeader from '@/txt/TodoHeader.vue'
import TodoFooter from '@/txt/TodoFooter.vue'
import TodoMain from '@/txt/TodoMain.vue'
export default {
  name: '',
  components: {
    TodoHeader,
    TodoFooter,
    TodoMain

  },
  data () {
    return {
      // list: [
      //   { id: 1, content: '跑步一公里' },
      //   { id: 2, content: '看书十分钟' },
      //   { id: 3, content: '吃饭两小时' },
      // ]
      list: JSON.parse(localStorage.getItem('list')) ||
        [
          { id: 1, content: '跑步一公里' },
          { id: 2, content: '看书十分钟' },
          { id: 3, content: '吃饭两小时' },
        ]
    }
  },
  watch: {
    list (newVal) {
      //监听list的变化,如果有新增或者删除,都要从本地存储中更新数据
      console.log(newVal);
      localStorage.setItem('list', JSON.stringify(newVal))
    }

  },
  created () {
  },
  computed: {
  },
  methods: {
    addlist (newdata) {
      this.list.push(newdata)
    },
    abcd (id) {
      console.log(id);
      this.list = this.list.filter(item => item.id !== id)
    }
  },

}
</script>
<style lang='less'  scoped>
.app {
  width: 300px;
  height: 300px;
}
</style>
